<!DOCTYPE html>
<html lang="zh-CN">
[#include "/theme/default/common/nav.html" /]
[#include "/theme/default/common/head.html" /]
[#include "/theme/default/common/footer.html" /]
<head>
[@head "照片" /]
  <link rel="stylesheet" href="${httpsurl}assets/plugs/wow/animate.css">
 <script src="${httpsurl}assets/plugs/wow/wow.js"></script>
</head>
[#include "/theme/default/common/page.html" /]


<body>
	<div class="fakeloader"></div>

    [@nav  5 /]
	<!-- /.navbar -->

	<div class="container">

		<div class="row">

			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs"
						data-toggle="offcanvas">Toggle nav</button>
				</p>
				<div class="row">
				[#list photos as item]
					<div  data-wow-delay="${0.5*item_index}s" class="col-xs-3 wow fadeInDown" >
						<h2>${(item.category.name)!""}</h2>
						<img class="img-responsive img-thumbnail" alt="Responsive image" src="${item.thumb}">
					</div>
				[/#list]
				<div class="col-xs-12 text-center">
				[@pager page curpage "${httpsurl}photo/index.htm?x=1" /]
				</div>
				</div>
				<hr>
				
				<!--/row-->
			</div>
			<!--/.col-xs-12.col-sm-9-->

			<div class="col-xs-6 col-sm-3" id="sidebar">
				<div class="list-group">
				    [#list catalogs]
				    [#items as item]
					<a href="${httpsurl}photo/catalog.htm?id=${item.id}" class="list-group-item">${item.name!""}</a>
					[/#items]
					[#else]
					[/#list]
						
				</div>
			</div>
			<!--/.sidebar-offcanvas-->
		</div>
		<!--/row-->

		<hr>

		 [@footer /]

	</div>
	<!--/.container-->
	
	  <script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
  </script>
</body>
</html>
